<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>emplist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content"> 
				<div id="header">
					<div id="rightheader">
						<p>
							<span v-text="date"></span>
							<br />
							<a href="javascript:;" @click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="/ems_vue/menu.html">首页</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						欢迎 <span v-show="user!=null">{{user.realname}}</span>!
					</h1>
					<table class="table">
						<tr class="table_header">
							<td>
								编号
							</td>
							<td>
								姓名
							</td>
							<td>
								头像
							</td>
							<td>
								工资
							</td>
							<td>
								年龄
							</td>
							<td>
								操作
							</td>
						</tr>
						<tr v-for="(emp,index) in dataShow" :key="emp.id" :class="index%2==0?'row1':'row2'">
							<td>
								{{emp.id}}
							</td>
							<td>
								{{emp.name}}
							</td>
							<td>
								<img :src="'/ems_vue/'+emp.path" width="60">
							</td>
							<td>
								{{emp.salary}}
							</td>
							<td>
								{{emp.age}}
							</td>
							<td>
								<a href="javascript:;" @click="delEmp(emp.id)">删除</a>&nbsp;<a :href="'/ems_vue/updateEmp.html?id='+emp.id">更新</a>
							</td>
						</tr>
					</table>
					<p>
						<input type="button" class="button" value="添加" onclick="location='addEmp.html'"/>
						<a href="javascript:;" v-if="page>0" @click="pageC(-1)">上一页</a>
						<span v-text="page+1"></span>
						<a href="javascript:;" v-if="page+1<pageNum" @click="pageC(1)">下一页</a>
					</p>

<!--					<div style="padding-right: 10px ;position: absolute;right: 100px">-->
<!--						-->
<!--					</div>-->
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ranlen@cl.com
				</div>
			</div>
		</div>
	</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
	var app = new Vue({
		el:"#wrap",
		data:{
			user:{
				realname:""
			},
			emps:[],//数据源
			date:"2022/6",
			pageSize:4,//
			pageNum:1,//总页数
			empShow:[],//分页后的数据
			page:0,//当前页
			dataShow:[],//当前显示的数据
			flag:true
		},
		methods:{
			logout(){
				//localStorage.removeItem("user");
				axios.get("http://localhost:8989/ems_vue/user/logout").then(res=>{});
				sessionStorage.removeItem("token");
				//location.reload(true);
				location.href = "/ems_vue/login.html";
			},
			delEmp(id){
				if (window.confirm("确定删除这条员工信息码？")){
					let _this = this;
					axios.get("http://localhost:8989/ems_vue/emp/delete?id="+id).then(res=>{
						if (res.data.state){
							alert(res.data.msg);
							_this.findAll();
						}else {
							alert(res.data.msg);
						}
					})
				}
			},
			findAll(){
				let _this = this;
				axios.get("http://localhost:8989/ems_vue/emp/findAll").then(res=>{
					_this.emps = res.data;
				});
			},
			pageC(i){
				this.pageNum = Math.ceil(this.emps.length/this.pageSize)||1;
				if (this.page+i>=0||this.page+i<this.pageNum){
					this.page+=i;
					this.dataShow = this.emps.slice(this.pageSize*this.page,this.pageSize*(this.page+1));
				}
			}
		},
		created(){
			// let u =localStorage.getItem("user");
			// if (u){
			// 	this.user = JSON.parse(u);
			// }else {
			// 	location.href = "/ems_vue/login.html";
			// }
			let aData = new Date();
			this.date =aData.getFullYear() + "/" + (aData.getMonth() + 1) + "/" + aData.getDate();
			let _this = this;
			axios.get("http://localhost:8989/ems_vue/user/getUser").then(res=>{
				if (!res.data.state){
					location.href = "/ems_vue/login.html";
				}
				_this.user = res.data.user;
			})
			//查询所有员工
			this.findAll();
			let date = new Date();
			this.date = date.toLocaleDateString();
		},
		mounted:function () {
			if (this.flag){
				setTimeout(()=>{
					this.pageNum = Math.ceil(this.emps.length/this.pageSize);
					if (this.pageNum==0){
						this.pageNum=1;
					}
					if (this.emps.length<this.pageSize){
						for (let j = 0; j < this.emps.length; j++) {
							this.dataShow[j] = this.emps[j];
						}
					}else {
						this.dataShow = this.emps.slice(0,this.pageSize);
					}
				},500);
				this.flag=false;
			}
		}
	})
</script>